<template>
  <div class="bottom">
    <navigation :items="navItems" :selectedItem="selectedItem" @item-selected="handleItemSelected"/>
  </div>
</template>

<script>


import Navigation from "@/components/content/navigation/Navigation.vue";

export default {
  name: 'NavigationSelected',
  components: {
    Navigation,
  },
  data() {
    return {
      navItems: [
        {
          label: '商城',
          image_activate: require('@/assets/icon/index/market.png'),
          image: require('@/assets/icon/index/market.png'),
        },
        {
          label: '知识',
          image_activate: require('@/assets/icon/index/knowledge.png'),
          image: require('@/assets/icon/index/knowledge.png'),
        },
        {
          label: '游戏',
          image_activate: require('@/assets/icon/index/game.png'),
          image: require('@/assets/icon/index/game.png'),
        },
        {
          label: '直播',
          image_activate: require('@/assets/icon/index/live.png'),
          image: require('@/assets/icon/index/live.png'),
        },
        {
          label: '社区',
          image_activate: require('@/assets/icon/index/comunity.png'),
          image: require('@/assets/icon/index/comunity.png'),
        },
      ],
      selectedItem: 0,
    };
  },
  methods: {
    handleItemSelected(index) {
      this.selectedItem = index;
    },
  },
};
</script>

<style scoped lang="scss">
.bottom{

}
</style>

